<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .text{
            background-color: aqua;
            font-size: 22px;
            margin-right: 20px;
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div>
        <span class="text">12346</span><a href="#">看不清楚换一张</a>
        <p>验证码：<input class="int" type="text"></p>
        <button class="btn">确定</button>
    </div>
    <script>
        function get(){
            var arr = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f","g","h"]
            var str = ''
            for(var i = 0; i < 6;i++){
            var num = Math.floor(Math.random()*15)
            str += arr[num]
        }
        return str
    }
    // var a = get()
    // document.write(a)
    var btn = document.querySelector("a")
    var text = document.querySelector(".text")
    // 调用函数
    // var a = get() 页面加载之后就实现随机数
    text.innerHTML = get()
    // 绑定事件
    btn.onclick = function(){
        // alert(1)
        // 改变相应的随机数
        text.innerHTML = get()
    }
    // 获取输入框的随机数
    var int = document.querySelector(".int")
    var but = document.querySelector(".btn")
    // 点击事件
    btn.onclick = function(){
        // 判断输入框的值是否与相应的验证码相匹配
        if(text.innerHTML == int.value){
            alert("成功")
        }else{
            alert("验证码错误")
        }
    }
    </script>
</body>
</html>